<template>
    <div class="main-content">
      <cardBox title="目录" icon="&#xe6f2;" class="left-panel">
          <treeMenu :treeData="menuList" name="clasS_NAME" ref="treeMenu" v-if="menuList.length > 0" isRightMenu
          @addMenuItem="handleAddMenu"
          @delMenuItem="handleDelMenu"
          @editMenuItem="handleAddMenu"
          @menuLeftClick="handleMenuClick"/>
      </cardBox>

      <div class="right-panel">
        <el-card>
            <div slot="header" class="card-title">
                <div>指标参数</div>
                <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAddList(1,'指标参数配置')">新增</el-button>
            </div>
            <el-table :data="tableList1" stripe>  
                <el-table-column prop="param" label="参数" align="center"></el-table-column>
                <el-table-column prop="paraM_NAME" label="参数名称" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="unit" label="单位" align="center"></el-table-column>
                <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作"  align="center" width="150">
                    <template slot-scope="scope">
                        <el-link type="primary" size="mini" icon="el-icon-edit" @click="handleEditList(1,scope.row,'指标参数配置')" :underline="false">修改</el-link>
                        <el-link type="danger" size="mini" icon="el-icon-delete" @click="handleDelList(1,scope.row)"  :underline="false" style="margin-left:10px">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-card>
            <div slot="header" class="card-title">
                <div>指标控制值</div>
                <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAddList(2,'指标控制值配置')">新增</el-button>
            </div>
            <el-table :data="tableList2" stripe>  
                <el-table-column prop="control" label="控制值"  align="center"></el-table-column>
                <el-table-column prop="controL_NAME" label="分量名称" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="unit" label="单位" align="center"></el-table-column>
                <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" align="center" width="150">
                    <template slot-scope="scope">
                        <el-link type="primary" size="mini" icon="el-icon-edit" @click="handleEditList(2,scope.row,'指标控制值配置')" :underline="false">修改</el-link>
                        <el-link type="danger" size="mini" icon="el-icon-delete" @click="handleDelList(2,scope.row)"  :underline="false" style="margin-left:10px">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-card>
            <div slot="header" class="card-title">
                <div>指标POINT含义</div>
                <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAddList(3,'指标POINT配置')">新增</el-button>
            </div>
            <el-table :data="tableList3" stripe>  
                <el-table-column prop="point" label="POINT"  align="center"></el-table-column>
                <el-table-column prop="poinT_NAME" label="POINT名称" align="center"></el-table-column> 
                <el-table-column label="操作" align="center" width="150">
                    <template slot-scope="scope">
                        <el-link type="primary" size="mini" icon="el-icon-edit" @click="handleEditList(3,scope.row,'指标POINT配置')" :underline="false">修改</el-link>
                        <el-link type="danger" size="mini" icon="el-icon-delete" @click="handleDelList(3,scope.row)"  :underline="false" style="margin-left:10px">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-card>
            <div slot="header" class="card-title">
                <div>指标INDEX含义</div>
                <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAddList(5,'指标INDEX配置')">新增</el-button>
            </div>
            <el-table :data="tableList5" stripe>  
                <el-table-column prop="index" label="INDEX"  align="center"></el-table-column>
                <el-table-column prop="indeX_NAME" label="INDEX名称" align="center"></el-table-column> 
                <el-table-column label="操作" align="center" width="150">
                    <template slot-scope="scope">
                        <el-link type="primary" size="mini" icon="el-icon-edit" @click="handleEditList(5,scope.row,'指标INDEX配置')" :underline="false">修改</el-link>
                        <el-link type="danger" size="mini" icon="el-icon-delete" @click="handleDelList(5,scope.row)"  :underline="false" style="margin-left:10px">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-card>
            <div slot="header" class="card-title">
                <div>指标分量</div>
                <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAddList(4,'指标分量')">新增</el-button>
            </div>
            <el-table :data="tableList4" stripe>  
                <el-table-column prop="comp" label="分量"  align="center"></el-table-column>
                <el-table-column prop="comP_NAME" label="分量名称" align="center"></el-table-column>
                <el-table-column prop="comP_NAME" label="关键分量" align="center">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.iskey == 1" size="small">是</el-tag>
                        <el-tag type="info" v-if="scope.row.iskey == 0" size="small">否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="comP_NAME" label="显示过程线" align="center">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.showline == 1" size="small">显示</el-tag>
                        <el-tag type="info" size="small" v-if="scope.row.showline == 0">不显示</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="valuE_TYPE" label="类型"  align="center">
                    <template slot-scope="scope">
                        <el-tag  size="small" v-if="scope.row.valuE_TYPE == 0">原始值</el-tag>
                        <el-tag  size="small" type="danger" v-if="scope.row.valuE_TYPE == 1">计算值</el-tag>
                        <el-tag type="success" size="small" v-if="scope.row.valuE_TYPE == 2">成果值</el-tag>
                        <el-tag type="warning" size="small" v-if="scope.row.valuE_TYPE == 3">评判值</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="formula" label="公式" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="unit" label="单位"  align="center"></el-table-column>
                <el-table-column prop="pricision" label="精度" align="center"></el-table-column>
                <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" align="center" width="150">
                    <template slot-scope="scope">
                        <el-link type="primary" size="mini" icon="el-icon-edit" @click="handleEditList(4,scope.row,'指标分量')" :underline="false">修改</el-link>
                        <el-link type="danger" size="mini" icon="el-icon-delete" @click="handleDelList(4,scope.row)"  :underline="false" style="margin-left:10px;">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-card>
            <div slot="header" class="card-title">
                <div>指标PATROL含义</div>
                <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAddList(6,'指标PATROL配置')">新增</el-button>
            </div>
            <el-table :data="tableList6" stripe>  
                <el-table-column prop="inspection" label="巡视名称"  align="center"></el-table-column>
                <el-table-column prop="inspection_Name" label="巡视中文名称" align="center"></el-table-column>
                <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" align="center" width="150">
                    <template slot-scope="scope">
                        <el-link type="primary" size="mini" icon="el-icon-edit" @click="handleEditList(6,scope.row,'指标PATROL配置')" :underline="false">修改</el-link>
                        <el-link type="danger" size="mini" icon="el-icon-delete" @click="handleDelList(6,scope.row)"  :underline="false" style="margin-left:10px;">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

       
      </div>

      <addMenuDialog :visible.sync="dialogMenuVisible" :menuForm="menuForm" @cancelMenu="handleCancelDialog" @saveMenu="handleAddMenuSave" :parentName="treeNodeLevel == 2 ? currentTreeData.clasS_NAME : ''"/>

      <listDilog :visible.sync="listDialogVisible" :dialogTitle="dialogTitle" :DialogNumber="DialogNumber" :listForm="listForm" @cancel="handleCancelListDialog" @save="handleSaveListDialog"/>

      
    </div>
</template>

<script>
import bus from '@/utils/eventBus.js';
import cardBox from "../../components/base/cardBox.vue";
import treeMenu from '@/components/base/treeMenu.vue'
import addMenuDialog from '@/components/base/addMenuDialog.vue'
import listDilog from '@/components/page/setting/IndicatorTypeDialog.vue'
import {scuRmIndexClassList,scuRmIndexClassEdit,scuRmIndexClassAdd,scuRmIndexClassDel,classParamList,classControlList,compLinkList,classLinkIndexList,InspectionList,scuRmIndexClassCompGet,classParamEdit,classParamAdd,classParamDel,classControlEdit,classControlAdd,classControlDel,compLinkEdit,compLinkAdd,compLinkDel,classLinkIndexEdit,classLinkIndexAdd,classLinkIndexDel,InspectionEdit,InspectionAdd,InspectionDel,scuRmIndexClassCompEdit,scuRmIndexClassCompAdd,scuRmIndexClassCompDel} from '@/api/https'

export default {
  name: 'IndicatorType',
  components:{addMenuDialog,cardBox,treeMenu,listDilog},
  data() {
    return {
      stationId: sessionStorage.getItem("stationId"),
      menuList:[],
      treeID:'',
      dialogMenuVisible:false,
      menuForm:{},
      treeDataEdit:false,
      currentTreeData:{},
      treeNodeLevel:'',
      tableList1:[],
      tableList2:[],
      tableList3:[],
      tableList4:[],
      tableList5:[],
      tableList6:[],
      listDialogVisible:false,
      listForm:{},
      editList:false,
      DialogNumber:0,
      dialogTitle:'',
    }
  },
  mounted(){
        bus.$emit('showBasin', false);
        this.onGegMenuList()
  },
  activated(){
      bus.$emit('showBasin', false);
  },
  methods: {
    // 目录部分
    onGegMenuList(){
      scuRmIndexClassList().then(res=>{
            if(res.isSuccess && res.data && res.data.length > 0){
                this.menuList = res.data
                this.findLeafNodes(this.menuList);
                this.$nextTick(()=>{
                    this.$refs.treeMenu.$refs.tree.setCurrentKey(this.treeID);
                    this.initData()
                })
            }else{
                this.menuList = []
            }
        })
    },
    findLeafNodes(data) {
        if (data[0].children == null || data[0].children.length === 0){
            this.treeID = data[0].id
            return
        }else{
            this.findLeafNodes(data[0].children);
        }
    },
    handleMenuClick(data){
       this.treeID =  data.indeX_CLASS_ID
       this.initData()
    },
    handleCancelDialog(){
        this.dialogMenuVisible = false
        this.menuForm = {}
        this.treeNodeLevel = ''
        this.currentTreeData = {}
        this.treeDataEdit = false
    },
    handleAddMenu(data,isEdit,treeNodeLevel) {
        this.currentTreeData = data  || {}
        this.treeDataEdit = isEdit || 0
        if(isEdit){
            this.treeNodeLevel = ''
            const _d = {
                ...data,
                name:data.clasS_NAME
            }
          this.menuForm = Object.assign({},_d)
          this.dialogMenuVisible = true
        }else{
            if(treeNodeLevel == 2 && data.iS_BOTTOM){
                this.currentTreeData =  {}
                this.treeDataEdit =  0
                this.$message.error('此目录已设为最底层，编辑目录设置后可添加子级！')
                return false
            }else{
                this.treeNodeLevel = treeNodeLevel || ''
                this.menuForm = {
                    iS_BOTTOM:0,
                    name:''
                }
                this.dialogMenuVisible = true
            }
        }
    },
    handleDelMenu(data){
      this.$confirm(`确认删除名称为 ${data.clasS_NAME} 的节点？`,'提示',{
          type:'warning'
      }).then(() => {
          scuRmIndexClassDel({
              id:data.id
          }).then(res=>{
              if(res.isSuccess){
                this.removeNodeFromTree(data.id)
              }else{
                this.$message.error(res.errorMessage)
              }
          })
      }).catch(() => {}); 
      
    },
    handleAddMenuSave(){
        if(this.treeDataEdit){
            const _d ={
                ...this.menuForm,
                clasS_NAME:this.menuForm.name
            }
            scuRmIndexClassEdit(_d).then(res=>{
                if(res.isSuccess){
                    let node = this.$refs['treeMenu'].$refs['tree'].getNode(res.data.id)
                    if(node){
                        node.data.clasS_NAME =res.data.clasS_NAME
                        node.data.iS_BOTTOM = res.data.iS_BOTTOM
                        node.setData(node.data)
                    }
                    this.$forceUpdate()
                    this.handleCancelDialog()
                }else{
                    this.$message.error(res.errorMessage)
                }
            })
        }else{
          // 新增
          if(this.treeNodeLevel === 1){
                // 新增同级
                const data = {
                    id:0,
                    indeX_CLASS_ID:0,
                    clasS_NAME:this.menuForm.name,
                    upid:this.currentTreeData.upid || 0,
                    iS_BOTTOM:this.menuForm.iS_BOTTOM
                }
                scuRmIndexClassAdd(data).then(res=>{
                    if(res.isSuccess){
                        if(this.menuList.length == 0){
                            this.onGegMenuList()
                        }else{
                            this.addNodeToTree(res.data,res.data.upid)
                        }
                        this.handleCancelDialog()
                    }else{
                        this.$message.error(res.errorMessage)
                    }
                })
            }else if(this.treeNodeLevel === 2){
                // 新增子级
                const data = {
                    id:0,
                    indeX_CLASS_ID:0,
                    clasS_NAME:this.menuForm.name,
                    upid:this.currentTreeData.indeX_CLASS_ID || 0,
                    iS_BOTTOM:this.menuForm.iS_BOTTOM
                }
                scuRmIndexClassAdd(data).then(res=>{
                    if(res.isSuccess){
                      this.addNodeToTree(res.data,res.data.upid)
                      this.handleCancelDialog()
                    }else{
                      this.$message.error(res.errorMessage)
                    }
                })
            }
        }
    },
    addNodeToTree(newNode, parentId) {
      const findAndAddNode = (nodes, targetId, newNode) => {
        for (let i = 0; i < nodes.length; i++) {
          if (nodes[i].id === targetId) {
            if (!nodes[i].children) {
              this.$set(nodes[i], 'children', []);
            }
            nodes[i].children.push(newNode);
            return true;
          }
          if (nodes[i].children && nodes[i].children.length > 0) {
            const found = findAndAddNode(nodes[i].children, targetId, newNode);
            if (found) return true;
          }
        }
        return false;
      };
    findAndAddNode(this.menuList, parentId, newNode);
      this.$nextTick(() => {
        this.$forceUpdate();
      });
    },

    removeNodeFromTree(nodeId) {
      const removeNode = (nodes, targetId) => {
        for (let i = 0; i < nodes.length; i++) {
          if (nodes[i].id === targetId) {
            nodes.splice(i, 1);
            return true;
          }
          if (nodes[i].children && nodes[i].children.length > 0) {
            const removed = removeNode(nodes[i].children, targetId);
            if (removed) return true;
          }
        }
        return false;
      };

      const removed = removeNode(this.menuList, nodeId);
      
      if (removed) {
        this.$nextTick(() => {
          this.menuList = [...this.menuList];
        });
      }
      
      return removed;
    },

    // 数据部分
    initData(){
        this.onGetListData1()
        this.onGetListData2()
        this.onGetListData3()
        this.onGetListData4()
        this.onGetListData5()
        this.onGetListData6()    
    },

    onGetListData1(){
        classParamList({
            INDEX_CLASS_ID:this.treeID
        }).then(res=>{
            if(res.isSuccess && res.data.length > 0 ){
                this.tableList1 = res.data || []
            }else{
                this.tableList1 = []
            }
        })
    },

    onGetListData2(){
        classControlList({
            INDEX_CLASS_ID:this.treeID
        }).then(res=>{
            if(res.isSuccess && res.data.length > 0 ){
                this.tableList2 =  res.data || []
            }else{
                this.tableList2 = []
            }
        })
    },

    onGetListData3(){
        compLinkList({
            INDEX_CLASS_ID:this.treeID
        }).then(res=>{
            if(res.isSuccess && res.data.length > 0 ){
                this.tableList3 =  res.data || []
            }else{
                this.tableList3 = []
            }
        })

    },

    onGetListData4(){
        scuRmIndexClassCompGet({
            INDEX_CLASS_ID:this.treeID
        }).then(res=>{
            if(res.isSuccess && res.data.length > 0 ){
                this.tableList4 =  res.data || []
            }else{
                this.tableList4 = []
            }
        })
    },

    onGetListData5(){
        classLinkIndexList({
            INDEX_CLASS_ID:this.treeID
        }).then(res=>{
            if(res.isSuccess && res.data.length > 0 ){
                this.tableList5 =  res.data || []
            }else{
                this.tableList5 = []
            }
        })
    },


    onGetListData6(){
        InspectionList({
            INDEX_CLASS_ID:this.treeID
        }).then(res=>{
            if(res.isSuccess && res.data.length > 0 ){
                this.tableList6 =  res.data || []
            }else{
                this.tableList6 = []
            }
        })
    },

    handleAddList(num,titleName){
        this.dialogTitle = titleName
        this.DialogNumber = num
        this.listDialogVisible = true
    },

    handleEditList(num,data,titleName){
        this.DialogNumber = num
        this.dialogTitle = titleName
        this.listForm = {...data}
        this.editList = true
        this.listDialogVisible = true
    },
    handleCancelListDialog(){
        this.DialogNumber = 0
        this.listForm = {}
        this.editList = false
        this.listDialogVisible = false
    },
    handleSaveListDialog(dialogData){
        const data = {...dialogData}
        if(this.DialogNumber == 1){
            data.remark = data.remark != null ? data.remark : ''
            data.unit = data.unit != null ?  data.unit : ''
            data.u_EDIT = data.u_EDIT == 1 ? 1 : 0
            if(this.editList){
                classParamEdit(data).then(res=>{
                    if(res.isSuccess){
                        this.handleCancelListDialog()
                        this.onGetListData1()
                    }else{
                        this.$message.error(res.errorMessage)
                    }
                })
            }else{
                data.id = 0
                data.indeX_CLASS_ID = this.treeID
                classParamAdd(data).then(res=>{
                    if(res.isSuccess){
                        this.handleCancelListDialog()
                        this.onGetListData1()
                    }else{
                        this.$message.error(res.errorMessage)
                    }
                })
            }
        }

        if(this.DialogNumber == 2){
            data.remark = data.remark != null ? data.remark : ''
            data.unit = data.unit != null ? data.unit : ''
            if(this.editList){
                classControlEdit(data).then(res=>{
                    if(res.isSuccess){
                        this.handleCancelListDialog()
                        this.onGetListData2()
                    }else{
                        this.$message.error(res.errorMessage)
                    }
                })
            }else{
                data.id = 0
                data.indeX_CLASS_ID = this.treeID
                classControlAdd(data).then(res=>{
                    if(res.isSuccess){
                        this.handleCancelListDialog()
                        this.onGetListData2()
                    }else{
                        this.$message.error(res.errorMessage)
                    }
                })
            }
        }

        if(this.DialogNumber == 3){
            if(this.editList){
                compLinkEdit(data).then(res=>{
                    if(res.isSuccess){
                        this.handleCancelListDialog()
                        this.onGetListData3()
                    }else{
                        this.$message.error(res.errorMessage)
                    }
                })
            }else{
                data.id = 0
                data.indeX_CLASS_ID = this.treeID
                compLinkAdd(data).then(res=>{
                    if(res.isSuccess){
                        this.handleCancelListDialog()
                        this.onGetListData3()
                    }else{
                        this.$message.error(res.errorMessage)
                    }
                })
            }
        }


        if(this.DialogNumber == 4){
            if(this.editList){
                scuRmIndexClassCompEdit(data).then(res=>{
                    if(res.isSuccess){
                        this.handleCancelListDialog()
                        this.onGetListData4()
                    }else{
                        this.$message.error(res.errorMessage)
                    }
                })
            }else{
                data.id = 0
                data.indeX_CLASS_ID = this.treeID
                scuRmIndexClassCompAdd(data).then(res=>{
                    if(res.isSuccess){
                        this.handleCancelListDialog()
                        this.onGetListData4()
                    }else{
                        this.$message.error(res.errorMessage)
                    }
                })
            }
        }

        if(this.DialogNumber == 5){
            if(this.editList){
                classLinkIndexEdit(data).then(res=>{
                    if(res.isSuccess){
                        this.handleCancelListDialog()
                        this.onGetListData5()
                    }else{
                        this.$message.error(res.errorMessage)
                    }
                })
            }else{
                data.id = 0
                data.indeX_CLASS_ID = this.treeID
                classLinkIndexAdd(data).then(res=>{
                    if(res.isSuccess){
                        this.handleCancelListDialog()
                        this.onGetListData5()
                    }else{
                        this.$message.error(res.errorMessage)
                    }
                })
            }
        }

        if(this.DialogNumber == 6){
            if(this.editList){
                InspectionEdit(data).then(res=>{
                    if(res.isSuccess){
                        this.handleCancelListDialog()
                        this.onGetListData6()
                    }else{
                        this.$message.error(res.errorMessage)
                    }
                })
            }else{
                data.id = 0
                data.indeX_CLASS_ID = this.treeID
                InspectionAdd(data).then(res=>{
                    if(res.isSuccess){
                        this.handleCancelListDialog()
                        this.onGetListData6()
                    }else{
                        this.$message.error(res.errorMessage)
                    }
                })
            }
        }   
    },
    handleDelList(num,data){
        if(num == 1){
            this.$confirm(`确认要删除名称为 ${data.paraM_NAME} 的指标参数？`, '提示', {
                type: 'warning'
                }).then(() => {
                    classParamDel({ID:data.id}).then(res=>{
                        if(res.isSuccess){
                            this.onGetListData1()
                        }else{
                            this.$message.error(res.errorMessage)
                        }
                    })
                }).catch(() => {        
            });
        }

        if(num == 2){
            this.$confirm(`确认要删除名称为 ${data.controL_NAME} 的指标控制值？`, '提示', {
                type: 'warning'
                }).then(() => {
                    classControlDel({ID:data.id}).then(res=>{
                        if(res.isSuccess){
                            this.onGetListData2()
                        }else{
                            this.$message.error(res.errorMessage)
                        }
                    })
                }).catch(() => {        
            });
        }

        if(num == 3){
            this.$confirm(`确认要删除名称为 ${data.poinT_NAME} 的指标POINT？`, '提示', {
                type: 'warning'
                }).then(() => {
                    compLinkDel({ID:data.id}).then(res=>{
                        if(res.isSuccess){
                            this.onGetListData3()
                        }else{
                            this.$message.error(res.errorMessage)
                        }
                    })
                }).catch(() => {        
            });
        }

        if(num == 4){
            this.$confirm(`确认要删除名称为 ${data.comP_NAME} 的指标分量？`, '提示', {
                type: 'warning'
                }).then(() => {
                    scuRmIndexClassCompDel({ID:data.id}).then(res=>{
                        if(res.isSuccess){
                            this.onGetListData4()
                        }else{
                            this.$message.error(res.errorMessage)
                        }
                    })
                }).catch(() => {        
            });
        }

        if(num == 5){
            this.$confirm(`确认要删除名称为 ${data.indeX_NAME} 的指标INDEX？`, '提示', {
                type: 'warning'
                }).then(() => {
                    classLinkIndexDel({ID:data.id}).then(res=>{
                        if(res.isSuccess){
                            this.onGetListData5()
                        }else{
                            this.$message.error(res.errorMessage)
                        }
                    })
                }).catch(() => {        
            });
        }

        if(num == 6){
            this.$confirm(`确认要删除名称为 ${data.inspection_Name} 的指标PATROL？`, '提示', {
                type: 'warning'
                }).then(() => {
                    InspectionDel({ID:data.id}).then(res=>{
                        if(res.isSuccess){
                            this.onGetListData6()
                        }else{
                            this.$message.error(res.errorMessage)
                        }
                    })
                }).catch(() => {        
            });
        }

    }
  }
}
</script>

<style scoped lang="scss">
.main-content {
  display: flex;
  flex-direction: row;
  justify-content: start;
  padding:0px;
    .left-panel {
      width: 350px;
      margin-right: 10px;
      height: calc(100vh - 115px);
    }
    .right-panel{
        flex:1;
        height: calc(100vh - 115px);
        overflow: auto;
        ::v-deep .el-card{
            margin-bottom: 10px;
        }
    }
}
.tree-container {
  overflow: auto;
  height: calc(100vh - 190px)
}
.card-title{
  font-weight: bold;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}



</style>